import React, { Component } from 'react'
import './index.scss'
import Popper from './popper'
import View from './../view/view.js'

export default class Demo3 extends Component {
  constructor (props) {
    super(props)
    this.state = {
      show: false
    }
    this.createFn = this.createFn.bind(this)
  }
  onMouseEnter () {
    this.setState({
      show: true
    })
  }
  onMouseLeave () {
    this.setState({
      show: false
    })
  }
  beforeEnterFn () {
    this.popper ? this.popper.update() : this.createFn()
  }
  createFn () {
    this.popper = new Popper(
      document.querySelector('.Demo3Person'),
      document.querySelector('.Demo3Popper'),
      {
        placement: 'top',
        offsetFn (ref, ctn) {
          ctn.style.position = 'fixed'
          ctn.style.top = '50px'
        }
      }
    )
  }
  render () {
    return (
      <div className="Demo3">
        <div className="Demo3Ctn">
          <div
            className="Demo3Person"
            onMouseEnter={this.onMouseEnter.bind(this)}
            onMouseLeave={this.onMouseLeave.bind(this)}>个人信息
            <View
            show={this.state.show}
            beforeEnter={this.beforeEnterFn.bind(this)}>
            <div className="Demo3Popper">
              <div>设置</div>
              <div>退出</div>
            </div>
          </View>
          </div>
        </div>
      </div>
    )
  }
}